<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var mainLayer;
            
            var head;
            var headX = 0;
            var headY = 1;
            
            var tail;
            var tailX = 0;
            var tailY = 0;
            
            var timer;      
            
            var direction = 'left';
            
            var target;
            var targetX = 4;
            var targetY = 4;
            var snackBody = new array();

            function movePeople()
            {
                var tempX = headX;
                var tempY = headY;
                
                if(direction=='down')
                {
                     if(!isWall((--tempX)+'_'+tempY))
                     {
                         //need a array for store all snack body's position, then update the head, the whole body, then the tail.
                         
                         getHead().value = 1;
                         headX--;                         
                         getHead().style.background = "black";                          
                         
                         getTail().style.background = "green";
                         getTail().value = 0;
                         TailX--;                     
                     }
                     if(isTarget((--tempX)+'_'+tempY))
                     {
                         getHead().value = 1;
                         headX--;                         
                         getHead().style.background = "black";
                     }
                     else
                     {
                          clearInterval(timer);
                          alert("hit wall......");
                     }
                }                                   
                if(direction=='up')
                {
                     if(!isWall((++tempX)+'_'+tempY))
                     {
                         getHead().value = 1;
                         headX++;                         
                         getHead().style.background = "black";                          
                         
                         getTail().style.background = "green";
                         getTail().value = 0;
                         TailX++;                         
                         getTail().style.background = "black"; 
                         getTail().value = 1;
                     }
                     else
                     {
                         clearInterval(timer);
                         alert("hit wall......");
                     }
                }
                if(direction=='left')
                {
                     if(!isWall(tempX+'_'+(--tempY)))
                     {
                         getPeople().style.background = "green";
                         y--;
                         getPeople().style.background = "black"; 
                     }
                     else
                     {
                         clearInterval(timer);
                         alert("hit wall......");
                     }
                 }
                if(direction=='right')
                {
                     if(!isWall(tempX+'_'+(++tempY)))
                     {
                         getPeople().style.background = "green";
                         y++;
                         getPeople().style.background = "black"; 
                     }
                     else
                     {
                         clearInterval(timer);
                         alert("hit wall......");
                     }
                }                                     
            }        
                       
            function changeDirection(event) 
            { 
                event = event || window.event; 
                
                if(event.keyCode==37) //左
                { 
                    direction = 'left';
                }
                else if(event.keyCode==38) //上
                { 
                    direction = 'up';
                }
                else if(event.keyCode==39) //右
                { 
                    direction = 'right';   
                }
                else if(event.keyCode==40) //下
                { 
                    direction = 'down';
                }
//                if(count == 0)
//                {
//                    clearInterval(timer);
//                    alert("Yeah~~~~~~~");
//                }
                    
            }
            
            function getHead()
            {
                head = document.getElementById(headX+'_'+headY);
                return head;
            }
            
            function getTail()
            {
                tail = document.getElementById(tailX+'_'+tailY);
                return tail;
            }
            
            function isWall(id)
            {
                var value = document.getElementById(id).value;
                if(value==1)
                {
                    return true;
                }
                else
                {
                    return false;
                }                    
            }   
            
            function isTarget(id)
            {
                var value = document.getElementById(id).value;
                if(value==2)
                {
                    return true;
                }
                else
                {
                    return false;
                }                    
            }
            
            function drawMap(divElement)
            {
                var mapHTML = '';

                mapHTML += '<table height="500px" border="1"><tbody>';

                for(var i = 0; i < 9; i++)
                {
                    mapHTML += '<tr>';

                    for(var j = 0; j < 9; j++)
                    {
                        var id = i+"_"+j;
                        
                        if(id=='2_5'||id=='3_5'||id=='4_5'||id=='5_5'||id=='6_5')
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 1 width="55px" style="background:red;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                        else if(id == headX + '_' + headX)
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 0 width="55px" style="background:black;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                        else if(id == tailX + '_' + tailY)
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 1 width="55px" style="background:white;" onClick="makeMove(this)">&nbsp;</td>';
                        } 
                        else if(id == targetX + '_' + targetY)
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 2 width="55px" style="background:yellow;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                        else
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 0 width="55px" style="background:green;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                    }                  
                    
                    mapHTML += "</tr>";
                }

                mapHTML += "</tbody></table>"
                divElement.innerHTML = mapHTML;

            }

            function startPeople()
            {
                timer = setInterval(movePeople, 1000);
            }
            
            
        </script>
    </head>
    <body onkeydown="movePlayer(event)">
        <div id="mainLayer"></div>
        <div style="color: blue;" onclick="startPeople()">start move</div>
        <footer>
            <script type="text/javascript">                
                mainLayer = document.getElementById("mainLayer");
                drawMap(mainLayer);                
            </script>
        </footer>
    </body>
</html>
